<template>
	<el-form-item class="topic_item" :label="`(${topicTypeName}) ${data.title}`">
		<template v-if="data.type === 1">
			<el-radio-group v-model="data.answer"><el-radio v-for="(item, index) in data.option" :key="index" :label="item"></el-radio></el-radio-group>
		</template>
		<template v-if="data.type === 2">
			<el-checkbox-group v-model="data.answer"><el-checkbox v-for="(item, index) in data.option" :key="index" :label="item"></el-checkbox></el-checkbox-group>
		</template>
		<template v-if="data.type === 3">
			<el-input type="text" placeholder="请填写答案" maxlength="60" show-word-limit v-model="data.answer"></el-input>
		</template>
		<template v-if="data.type === 4">
			<el-radio-group v-model="data.answer"><el-radio v-for="(item, index) in data.option" :key="index" :label="item"></el-radio></el-radio-group>
		</template>
		<template v-if="data.type === 5">
			<el-input type="textarea" placeholder="请填写答案" :autosize="{ minRows: 3 }" maxlength="500" show-word-limit v-model="data.answer"></el-input>
		</template>
	</el-form-item>
</template>

<script>
export default {
	props: {
		data: Object
	},
	data() {
		return {};
	},
	computed: {
		topicTypeName() {
			switch (this.data.type) {
				case 1:
					return '单选题';
					break;
				case 2:
					return '多选题';
					break;
				case 3:
					return '填空题';
					break;
				case 4:
					return '判断题';
					break;
				case 5:
					return '问答题';
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.topic_item ::v-deep {
	padding: 10px 20px 20px;
	border: dashed 1px transparent;
	border-radius: 6px;
	margin-bottom: 10px;
	&.error {
		border-color: rgba(255, 0, 0, 0.5);
		background-color: rgba(255, 0, 0, 0.02);
	}
	.el-form-item__label {
		display: block;
		float: none;
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
		text-align: left;
	}
	.el-checkbox-group {
		display: inline-block;
	}
	.el-radio,
	.el-checkbox {
		display: flex;
		align-items: flex-start;
		margin: 0;
		padding: 10px;
	}
	.el-radio__input,
	.el-checkbox__input {
		font-size: 0;
		margin-top: 4px;
		&.is-checked {
			.el-radio__inner,
			.el-checkbox__inner {
				border-color: #357c65;
				background-color: #357c65;
			}
			& + .el-radio__label {
				color: #357c65;
			}
			& + .el-checkbox__label {
				color: #357c65;
			}
		}
		&.is-focus {
			.el-checkbox__inner {
				border-color: #357c65;
			}
		}
	}
	.el-radio__inner,
	.el-checkbox__inner {
		width: 16px;
		height: 16px;
		&:hover {
			border-color: #357c65;
		}
	}
	.el-radio__inner::after {
		width: 6px;
		height: 6px;
	}
	.el-checkbox__inner::after {
		width: 5px;
		height: 9px;
		top: 0;
	}
	.el-radio__label,
	.el-checkbox__label {
		font-size: 16px;
		line-height: 24px;
		white-space: normal;
	}

	.el-input__inner:focus {
		border-color: #357c65;
	}

	.el-textarea__inner {
		font-family: 'Microsoft Yahei';
		&:focus {
			border-color: #357c65;
		}
	}
}
</style>
